<template>
  <div class="supervision-detail">
    <el-dialog
      :visible="visible"
      width="450px"
      title="督办记录"
      custom-class="supervision-info-popup"
      @open="getSupervisionInfo"
      @close="resetFun"
    >
      <div class="supervision-info">
        <AlarmRow label="督办环节：" :value="supervisionInfo.handleLinkName"></AlarmRow>
        <AlarmRow label="督办人：" :title="supervisionInfo.handleUserName" :value="supervisionInfo.handleUserName"></AlarmRow>
        <AlarmRow label="督办时间：" :value="supervisionInfo.handleTime"></AlarmRow>
        <AlarmRow class="need-wrap" wrap label="督办意见：" :title="supervisionInfo.handleRemark" :value="supervisionInfo.handleRemark"></AlarmRow>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AlarmRow from "@/components/eventManagement/infos/AlarmRow";
import { getHandleRecordByOrderId } from '@/api/modules/eventManagement/eventDialog/supervision-dialog.js'
export default {
  name: "supervisionDetail",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    orderData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      supervisionInfo: {}
    }
  },
  components: {
    AlarmRow
  },
  methods: {
    resetFun() {
      this.$emit('update:visible', false)
    },
    getSupervisionInfo() {
      getHandleRecordByOrderId({orderId: this.orderData.warningOrderId}).then(res => {
        if(res.code === 200) {
          this.supervisionInfo = res.data.rows[0]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .supervision-info {
  .row {
    width: 100%;
    padding-right: 0;
    .label {
      width: 68px !important;
      text-align: right;
    }
  }
  .need-wrap {
    align-items: start !important;
    .value span{
      white-space: normal !important;
    }
  }
}
</style>
<style lang="scss">
.supervision-info-popup {
  .el-dialog__header {
    padding: 12px;
    .el-dialog__headerbtn {
      right: 12px;
      top: 12px;
    }
  }
  .el-dialog__body {
    padding: 2px 12px;
  }
}
</style>
